<template>
    <div class="app-container">
        <el-card class="box-card">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="单据编号">
                    <el-input v-model="form.number" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="单据日期">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="请选择开始" v-model="form.startDate"
                            style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">~</el-col>
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="请选择结束" v-model="form.endDate"
                            style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onQuery">查询</el-button>
                    <el-button @click="onReset">重置</el-button>
                    <el-button v-if="showMore" @click="showMore = false">收起</el-button>
                    <el-button v-else @click="showMore = true">展开</el-button>
                </el-form-item>
                <div v-if="showMore" class="more">
                    <el-form-item label="单据主题">
                        <el-input v-model="form.subject" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="发票类型">
                        <el-select v-model="form.invoiceType" placeholder="请选择发票类型">
                            <el-option label="类型一" value="type1"></el-option>
                            <el-option label="类型二" value="type2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发票号">
                        <el-input v-model="form.invoiceNumber" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="开票日期">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="请选择开始" v-model="form.invoiceStartDate"
                                style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">~</el-col>
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="请选择结束" v-model="form.invoiceEndDate"
                                style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="客户">
                        <el-select v-model="form.customer" placeholder="请选择">
                            <el-option label="客户一" value="customer1"></el-option>
                            <el-option label="客户二" value="customer2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单据阶段">
                        <el-select v-model="form.stage" placeholder="请选择">
                            <el-option label="阶段一" value="stage1"></el-option>
                            <el-option label="阶段二" value="stage2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="已生效">
                        <el-select v-model="form.effective" placeholder="请选择">
                            <el-option label="是" value="true"></el-option>
                            <el-option label="否" value="false"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="已关闭">
                        <el-select v-model="form.closed" placeholder="请选择">
                            <el-option label="是" value="true"></el-option>
                            <el-option label="否" value="false"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="已作废">
                        <el-select v-model="form.invalid" placeholder="请选择">
                            <el-option label="是" value="true"></el-option>
                            <el-option label="否" value="false"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <div class="table-operation-row">
                <el-button type="primary" icon="el-icon-plus" plain @click="showNewInvoiceModal">新增</el-button>
                <el-link :underline="false" type="primary" icon="el-icon-download" @click="exportToExcel">导出</el-link>
                <el-upload style="display: inline-block;" class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange"
                    :file-list="fileList1">
                    <el-link :underline="false" type="primary" icon="el-icon-upload2">导入</el-link>
                </el-upload>
                <span class="word">已选择 <span style="color: #409eff;">{{ selectedCount }}</span>项</span>
                <el-button icon="el-icon-setting" class="zd" plain>自定义列</el-button>
            </div>

            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="selection" width="55" fixed="left"></el-table-column>
                <el-table-column label="#" width="50" fixed="left">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="billNo" label="单据编号" width="150" fixed="left" sortable>
                </el-table-column>
                <el-table-column prop="billDate" label="单据日期" width="110" sortable>
                </el-table-column>
                <el-table-column prop="province" label="单据主题" width="270" sortable>
                </el-table-column>
                <el-table-column prop="customerId_dictText" label="客户" width="270" sortable>
                </el-table-column>
                <el-table-column prop="invoiceType_dictText" label="发票类型" width="100">
                </el-table-column>
                <el-table-column prop="invoiceNo" label="发票号" width="180" sortable>
                </el-table-column>
                <el-table-column prop="zip" label="开票日期" width="100">
                </el-table-column>
                <el-table-column prop="amt" label="金额" width="120">
                </el-table-column>
                <el-table-column prop="billStage_dictText" label="单据阶段" width="75">
                </el-table-column>

                <el-table-column prop="isEffective_dictText" label="已生效" width="60">
                </el-table-column>
                <el-table-column prop="isAuto_dictText" label="已关闭" width="60">
                </el-table-column>
                <el-table-column prop="isClosed_dictText" label="已作废" width="60">
                </el-table-column>
                <el-table-column prop="isReturned_dictText" label="自动单据" width="60">
                </el-table-column>
                <el-table-column prop="isRubric_dictText" label="红字单据" width="60">
                </el-table-column>
                <el-table-column prop="remark" label="备注" width="275">
                </el-table-column>
                <el-table-column prop="billDate" label="生效时间" width="90">
                </el-table-column>
                <el-table-column prop="approver_dictText" label="核批人" width="75">
                </el-table-column>

                <el-table-column prop="billDate" label="制单时间" width="90">
                </el-table-column>
                <el-table-column prop="createBy_dictText" label="制单人" width="75">
                </el-table-column>
                <el-table-column prop="sysOrgCode_dictText" label="制单部门" width="120">
                </el-table-column>
                <el-table-column prop="updateTime" label="修改时间" width="90">
                </el-table-column>
                <el-table-column prop="updateBy_dictText" label="修改人" width="75">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="showEditInvoiceModal(scope.$index, scope.row)" type="text"
                            size="small">编辑</el-button>
                        <el-dropdown trigger="hover">
                            <span class="el-dropdown-link">
                                更多<span class="el-icon-arrow-down el-icon--right"></span>
                            </span>
                            <el-dropdown-menu class="usbut" slot="dropdown">
                                <el-button class="debut" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                <el-button class="debut" @click="handleInvalid(scope.row)">作废</el-button>
                                <el-button class="debut" @click="handlePrint(scope.row)">打印</el-button>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination-container">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                    @current-change="handleCurrentChange"></el-pagination>
            </div>
        </el-card>
        <New ref="newInvoiceModal" @query="onQuery"></New>
        <edit ref="editInvoiceModal" @query="onQuery"></edit>
    </div>
</template>

<script>
import { cgine } from '@/api/kcgl';
import * as XLSX from 'xlsx';
import New from '@/components/new.vue';
import edit from '@/components/edit.vue';
export default {
    components: {
        New,
        edit
    },
    data() {
        return {
            fileList1: [],// 导入的
            fileList: [],// 附件的
            users:[],
            form: {
                number: '',
                startDate: '',
                endDate: '',
                subject: '',
                invoiceType: '',
                invoiceNumber: '',
                invoiceStartDate: '',
                invoiceEndDate: '',
                customer: '',
                stage: '',
                effective: '',
                closed: '',
                invalid: '',
            },
            showMore: false,
            tableData: [],
            fixed: true,
            total: 3,
            pageSize: 10,
            selectedCount: 0,
            list: {
                _t:new Date().getTime(),
                isVoided: 0,
                column: 'createTime',
                order: ' desc',
                field: 'id,,,billNo,billDate,subject,customerId_dictText,invoiceType_dictText,invoiceNo,invoiceDate,amt,billStage_dictText,isEffective_dictText,isClosed_dictText,isVoided_dictText,isAuto_dictText,isRubric_dictText,remark,effectiveTime,approver_dictText,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10,
            }
        };
    },
    methods: {
        handleSelectionChange(selections) {
            this.selectedCount = selections.length;
        },
        // 点击附件上传
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 导出
        exportToExcel() {
            // 将数据转换为工作表
            const worksheet = XLSX.utils.json_to_sheet(this.users);

            // 创建工作簿并添加工作表
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

            // 导出Excel文件
            XLSX.writeFile(workbook, 'data.xlsx');
        },
        // 导入
        handleChange(file, fileList1) {
            this.fileList1 = fileList1.slice(-3);
        },
        showNewInvoiceModal() {
            this.$refs.newInvoiceModal.dialogVisible = true;
        },
        showEditInvoiceModal(row) {
            this.$refs.editInvoiceModal.invoiceForm = Object.assign({}, row);
            this.$refs.editInvoiceModal.dialogVisible = true;
        },
        handleCurrentChange(currentPage) {
            console.log('当前页码:', currentPage);
        },
        onQuery() {
            console.log('查询');
        },
        onReset() {
            console.log('重置');
        },
        handleClick(row) {
            console.log(row);
        },

        async getfine() {
            let datae = new Date().getTime()
            let data = {
                te:datae,
                pageNo:1,
                pageSize:10
            }
            let res = await cgine(data)
            console.log(res);
            this.tableData = res.result.records
            console.log(this.tableData);
            

        }
    },
    mounted() {
        this.getfine()
    }
}
</script>

<style scoped>
.el-button--small {
    font-size: 14px;
    margin-right: 2px;
}

.el-dropdown-link {
    color: #409eff;
    cursor: pointer;
}
.debut {
    border: 0;
    background-color: #fff;
}
.el-form {
    display: flex;
    flex-wrap: wrap;
}

.form-layout.el-row {
    width: 100%;
    margin-bottom: 10px;
}

.el-input {
    width: 225px;
    height: 32px;
}

.el-form-item {
    margin-bottom: 10px;
}

.el-col.line {
    text-align: center;
    line-height: 32px;
}

.more {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.el-form-item[data-v-633681e1] {
    margin-bottom: 10px;
}

.pagination-container {
    text-align: right;
    margin-top: 10px;
}

.table-operation-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
}

.table-operation-row el-button {
    margin-right: 10px;
}

.zd {
    position: absolute;
    right: 0;
    border: 0;
}

.word {
    margin-left: 10px;
}
.el-link.el-link--primary{
    margin-left: 10px;
}
</style>